{% block sw_meteor_page %}
<div
    class="sw-meteor-page"
    :class="pageClasses"
>
    <div
        ref="pageBody"
        class="sw-meteor-page__body"
    >
        <header
            ref="pageHeader"
            class="sw-meteor-page__head-area"
        >
            <div class="sw-meteor-page__head-area-top-bar-content">
                <slot name="search-bar">
                    {% block sw_meteor_page_seach_bar %}
                    <sw-search-bar />
                    {% endblock %}
                </slot>
            </div>

            <div class="sw-meteor-page__head-area-global-actions">
                <sw-app-topbar-button />
                {% block sw_meteor_page_notification_center %}
                <sw-notification-center />
                {% endblock %}

                <sw-help-center-v2 />
            </div>

            <div class="sw-meteor-page__smart-bar">
                <div class="sw-meteor-page__smart-bar-navigation">
                    <slot name="smart-bar-back">
                        {% block sw_meteor_page_navigation %}
                        <sw-meteor-navigation :from-link="fromLink" />
                        {% endblock %}
                    </slot>
                </div>

                <div class="sw-meteor-page__smart-bar-content">
                    <div class="sw-meteor-page__smart-bar-module-info">
                        <div
                            v-if="!hideIcon && hasIconOrIconSlot"
                            class="sw-meteor-page__smart-bar-module-icon"
                        >
                            <slot name="smart-bar-icon">
                                {% block sw_meteor_page_smart_bar_icon %}
                                <mt-icon
                                    v-if="hasIcon"
                                    :name="module.icon"
                                    :color="pageColor"
                                />
                                {% endblock %}
                            </slot>
                        </div>

                        <div class="sw-meteor-page__smart-bar-header">
                            <h2 class="sw-meteor-page__smart-bar-title">
                                <slot name="smart-bar-header">
                                    {% block sw_meteor_page_smart_bar_title %}
                                    <template v-if="module && module.title">
                                        {{ $tc(module.title) }}
                                    </template>
                                    {% endblock %}
                                </slot>
                            </h2>

                            <div class="sw-meteor-page__smart-bar-meta">
                                {% block sw_meteor_page_smart_bar_meta %}
                                <slot name="smart-bar-header-meta"></slot>
                                {% endblock %}
                            </div>
                        </div>

                        <div class="sw-meteor-page__smart-bar-description">
                            {% block sw_meteor_page_smart_bar_description %}
                            <slot name="smart-bar-description"></slot>
                            {% endblock %}
                        </div>
                    </div>

                    <div class="sw-meteor-page__smart-bar-actions">
                        {% block sw_meteor_page_smart_bar_actions %}
                        <slot name="smart-bar-actions"></slot>
                        {% endblock %}
                    </div>

                    <div class="sw-meteor-page__smart-bar-context-buttons">
                        {% block sw_meteor_page_smart_bar_context_buttons %}
                        <slot name="smart-bar-context-buttons"></slot>
                        {% endblock %}
                    </div>
                </div>
            </div>

            <div
                v-if="hasTabs"
                class="sw-meteor-page__smart-bar-tabs"
            >
                {% block sw_meteor_page_smart_bar_tabs %}
                <sw-tabs
                    position-identifier="sw-meteor-page"
                    :small="false"
                    @new-item-active="emitNewTab"
                >
                    <template #default>
                        <slot name="page-tabs"></slot>
                    </template>
                </sw-tabs>
                {% endblock %}
            </div>
        </header>
        <main class="sw-meteor-page__content">
            {% block sw_meteor_page_content %}
            <div
                v-if="fullWidth"
                class="sw-meteor-page__scrollable-content"
            >
                <slot></slot>
            </div>

            <template v-else>
                <slot></slot>
            </template>
            {% endblock %}
        </main>
    </div>
</div>
{% endblock %}
